<template>
<div>
  <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-input v-model="formInline.noticeName" placeholder="请输入公告标题"   style="width: 180px"></el-input>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  @click="checkByName">查询</el-button>
          <el-button type="primary" @click="AddNoticeVisible = true" >新增公告</el-button>
        </el-form-item>
      </el-form>
  </div>

  <div>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      type="index"
      label="编号"
      >
    </el-table-column>
    <el-table-column
      prop="noticeId"
      label="公告号"
      >
    </el-table-column>
    <el-table-column
      prop="noticeName"
      label="公告标题"
      >
    </el-table-column>
    <el-table-column
      prop="noticeDate"
      label="公告时间"

      :formatter="dateFormat">
    </el-table-column>
    <el-table-column
      prop="noticeModifyPerson"
      label="针对人群"

      >
    </el-table-column>


    <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button type="primary" size='small'  @click.native="noticemanageSelid(scope.row.noticeId)">查看</el-button>
          </template>
    </el-table-column>
  </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
  <el-dialog
    title="公告详情"
    :visible.sync="dialogVisible"
    width="30%"
    >
    <span>{{rule.noticeInf}}</span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog
    title="提示"
    :visible.sync="AddNoticeVisible"
    width="30%"
    >
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="公告标题" prop="noticeName" required>
          <el-input type="text" v-model="ruleForm2.noticeName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告详情" prop="noticeInf" required>
          <el-input type="text" v-model="ruleForm2.noticeInf" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告时间" required>
          <el-col :span="11">
            <el-form-item prop="noticeDate">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm2.noticeDate" style="width: 100%;" ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>



        <!-- <el-form-item label="状态" prop="noticeDelete" required>
          <el-input type="text" v-model="ruleForm2.noticeDelete" auto-complete="off"></el-input>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
        </el-form-item>
    </el-form>
  </el-dialog>





</div>
</template>



<style>
.el-table th{
  text-align: center;
}
</style>

<script>
import {noticemanageFy} from '@/axios/api'
import {noticemanageSel} from '@/axios/api'
import {noticemanageAdd} from '@/axios/api'
import {formatDate} from '@/common/js/date'
  export default {
    data(){
      return {
        rule:{
            noticeInf: ''
        },
        pageIndex:1,
        total:200,//总数
        pageSize:10,
        ruleForm2: {
          noticeName: '',
          noticeInf: '',
          noticeDate: ''

        },
        rules2: {
          noticeName: [
            { required: true,message:"请输入公告标题", trigger: 'blur' }
          ],
          noticeInf: [
            { required: true,message:"请输入公告详情", trigger: 'blur' }
          ],
          noticeDate: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ]

        },
        currentPage:1,
        tableData: [],
        noticeAddDat:[],
        dialogVisible:false,
        AddNoticeVisible:false,
        date1:'',

        formInline: {
         noticeName: ''
       }
      }
    },
    methods:{
      checkByName() {
        this.noticeList() ;
      },
      submitForm(formName) {
        console.log( this.$refs[formName]);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            this.AddNoticeVisible=false;
            //this.handleClose(true);
            console.log(this.ruleForm2);
            this.noticemanageAdd1();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      noticemanageAdd1(){
      console.log(this.ruleForm2.noticeDate);
        this.ruleForm2.noticeDate=formatDate(this.ruleForm2.noticeDate,"yyyy/MM/dd");
        this.ruleForm2.noticeCreateDate=formatDate( new Date(),"yyyy/MM/dd");
        this.ruleForm2.noticeModifyDate=formatDate( new Date(),"yyyy/MM/dd");
        console.log(this.ruleForm2);
        noticemanageAdd(this.ruleForm2).then(res =>{
          if (res.status == 200) {
            this.noticeList() ;
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
      },
      /*日期格式化*/
				dateFormat(row, column) {
					var date = row[column.property];
					//console.log(date);
					return formatDate(new Date(date), 'yyyy-MM-dd');
				},

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // handleClose(done) {
      //   this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {});
      // },
      handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       let params = {pageIndex:val,condition:this.formInline.noticeName};
       noticemanageFy(params).then(res =>{
         console.log(res);
       this.tableData =  res.resData.list;

       })
     },
      noticeList(){
      //  console.log( 'checkname :' + this.formInline.noticeName);
        let params = {pageIndex: this.pageIndex,condition:this.formInline.noticeName}
        noticemanageFy(params).then(res =>{
          console.log(res);
          this.tableData=res.resData.list;
          this.pageSize=res.resData.pageSize;
          this.total=res.resData.total;
        })
      },

      noticemanageSelid(id){
        let param = {noticeId:id};
        noticemanageSel(param).then(res =>{
          this.rule.noticeInf=res.resData.noticeInf;
          this.dialogVisible = true;
        })
      },


      onSubmit() {
        console.log('submit!');
      }
    },
    mounted(){
      this.noticeList()
    }
  }
</script>
